前言

隨著可以瀏覽網頁的裝置與各式尺寸越來越多，響應式網頁設計（Responsive Web Design, RWD）已經是現今網站必備的技術之一，如果網站有實作響應式的設計，則可以依據使用者不同的裝置視窗尺寸，來根據尺寸大小自動的調整與適應網頁的排版布局。

傳統 CSS 實作 RWD 的方式

我們要針對網頁實作 RWD 的設計時，會需要使用到 CSS 的媒體查詢與設定尺寸的範圍，例如 @media (min-width: 1280px) { ... }，當有多個尺寸的斷點需要做設定時，你還得需要考慮順序上的問題，否則這些斷點與樣式可能會無法依照你的想像運作。

這個過程會非常的煩瑣與重複，因為你可能會在不同頁面或元件中來使用到斷點，那就需要個別的來設定這些斷點所對應的樣式。

除此之外，在 HTML 標籤的 style 屬性，也無法支援媒體查詢來實作斷點，而一些原子化 CSS（Atomic CSS）的框架或插件，雖然可以透過在 calss 上撰寫類別透過匹配演算法來自動產生相對應的斷點，但多屬也仰賴官方預設斷點，如果有更多自訂的需要還是得額外設定。

Master CSS 這樣做

Master CSS 採用匹配演算法非常的聰明，除了可以在所有樣式中使用響應式斷點，而且幾乎不需要在 CSS 中思考或排序媒體規則，因為主規則引擎會根據斷點和範圍自動將媒體規則排序。

當你需要設定不同斷點 grid-cols 的欄位數量時，你可以這樣做：

<div class="grid-cols:2 grid-cols:3@xs grid-cols:4@sm grid-cols:5@md …">…</div>

官方所預設可以使用的斷點簡寫多達 11 種之多，支援了許多常見的裝置尺寸。

斷點的標記語法

使用官方預設的標記

語法：class@viewport

範例：font:16@md

你幾乎可以在所有的 Master CSS 的類別結尾加上 @viewport 來設定樣式生效的斷點。

使用自訂的尺寸數值

語法：class@size

範例：font:16@1024

如果官方預設的標記沒有適合的尺寸，或需要自訂特別的尺寸大小，你也可以使用 @size 來建立如 @1024（min-width: 1024p）、@789（min-width: 789px） 的特定尺寸斷點。

使用運算子

語法：class@<viewport / class@<size

　　　class@<=＝viewport / class@<=size

　　　class@>viewport / class@>size

　　　class@>=viewport / class@>=size

範例：font:16@<xs / font:32@>md

你也可以結合運算子 <、<=、>、>= 來設定小於或大於斷點尺寸。

視窗寬度小於 N

若要在小於特定視窗寬度時套用樣式，使用 < 運算子，例如視窗尺寸小於 sm（834px） 時隱藏元素。

<div class="hide@<sm">

產生的 CSS 規則：

@media (max-width:833.98px) {
    .hide\@\<sm {
        display: none
    }
}

視窗寬度最多為 N

若要在小於或等於特定視窗寬度內套用樣式，使用 <= 運算子，例如視窗還未超過 sm（834px）則始終隱藏元素。

<div class="hide@<=sm">

產生的 CSS 規則：

@media (max-width:834px) {
    .hide\@\<\=sm {
        display: none
    }
}

視窗寬度超過 N

視窗寬度超過 sm 時套用樣式，使用 > 運算子，例如視窗尺寸超過 **sm（834px）**隱藏元素：

<div class="hide@>sm">

產生的 CSS 規則：

@media (min-width:834.02px) {
    .hide\@\>sm {
        display: none
    }
}

視窗寬度至少為 N

視窗寬度大於等於 sm 時套用樣式，使用 >= 運算子，例如視窗尺寸已達 **sm（834px）**隱藏元素：

<div class="hide@>=sm">

產生的 CSS 規則：

@media (min-width:834px) {
    .hide\@\>\=sm {
        display: none
    }
}

不過使用 **>=** 運算子，@>=N 與 @N 等價，所以推薦直接使用 @N 來做設定。

<div class="hide@>=sm">
<!-- 等價 -->
<div class="hide@sm">

結合運算子來設定尺寸範圍

你也可以使用 & 邏輯運算子來表示 及 或 And 的意思來設定兩個尺寸間的範圍。

例如搭配運算子 <、<=、>、>= 來設定範圍，尺寸大於等於 sm（834px） 且 尺寸最大不超過 **md（1024px）**時隱藏元素。

<div class="hide@sm&<md">

產生的 CSS 規則：

@media (min-width:834px) and (max-width:1023.98px) {
    .hide\@sm\&\<md {
        display: none
    }
}

RWD 設計模式與策略

在設計與開發響應式網頁時，行動優先和桌面優先是兩種常見的開發策略，也取決於專案要求、目標受眾和整體的營運策略。

由於 Master CSS 靈活的標記語法，官方提出了另一種靈活的策略——語法優先。

行動優先

行動優先的設計方法在最初會在專注在小螢幕尺寸的裝置，例如手機或平板電腦，來對此進行設計與最佳化，再逐漸的設定樣式以適配更大螢幕尺寸的裝置，包括桌上型電腦、大尺寸的螢幕。

例如，在行動優先中所設定的樣式，會先設定來適應小螢幕，且不受視窗尺寸的約束。

<p class="font:24">

接著再逐漸調整介面來適應更大的視窗，例如，添加適應大於 1024px 大小的視窗尺寸，將字體設為 2rem。

<p class="font:24 font:32@md …">

產生的 CSS 規則：

.font\:24 {
    font-size: 1.5rem
}
 
@media (min-width:1024px) {
    .font\:32\@md {
        font-size: 2rem
    }
}

桌面優先

另一種桌面優先的開發策略，則是先優先考慮較大的螢幕尺寸，再逐漸的配置更小的裝置。

不受視窗尺寸的約束先設定字體大小為 2rem。

<p class="font:32">

接著再逐漸調整介面來適應更小的視窗，例如，添加適應小於 1024px 大小的視窗尺寸，將字體設為 1.5rem。

<p class="font:32 font:24@<md …">

產生的 CSS 規則：

.font\:32 {
    font-size: 2rem
}
 
@media (max-width:1023.98px) {
    .font\:24\@\<md {
        font-size: 1.5rem
    }
}

語法優先

透過上述的語法介紹，你可以藉由 Master CSS 靈活的語法，來擺脫行動或桌面優先的限制。

僅在行動裝置上將背景設定為白色

對於行動裝置優先，你可能會需要添加在更大的尺寸斷點上，恢復為原始背景。

<div class="bg:white bg:transparent@md …">

而使用 Master CSS，你可以透過使用運算子 **<** 來限制只有小尺寸的視窗套用白色背景樣式。

<div class="bg:white@<md …">

僅在桌面裝置上將背景設定為白色

對於行動裝置優先，你設定好背景為白色後，在較小的視窗尺寸斷點上需要恢復為原始背景。

<div class="bg:white bg:transparent@<md …">

而使用 Master CSS，你可以透過使用運算子 **>** 來限制只有大尺寸的視窗套用白色背景樣式。

<div class="bg:white@md …">

透過 Master CSS 的斷點標記、運算子與邏輯運算子的結合，你不再需要讓費精力去堅持特定的設計策略，因為你可以直接照你的想法來設計響應式排版布局，這不僅可以獲得更好的開發體驗，還可以讓減少類別標記數量和 CSS 輸出大小。